<!DOCTYPE html>
<html class="iframe-h">

<head>
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
    <title>网站后台管理模版</title>
    <link rel="stylesheet" type="text/css" href="../../static/admin/layui/css/layui.css"/>
    <link rel="stylesheet" type="text/css" href="../../static/admin/css/admin.css"/>
</head>

<body>
<div class="wrap-container clearfix">
    <div class="column-content-detail">
        <form class="layui-form" id="myform">
            <div class="layui-form-item">

                <div class="layui-inline">
                    <input type="text" name="title" placeholder="请输入标题"
                           autocomplete="off" class="layui-input">
                </div>
                <div class="layui-inline">
                    <select name="urgent" lay-filter="urgent">
                        <option value="">紧急程度</option>
                        <option value="紧急">紧急</option>
                        <option value="不紧急">不紧急</option>
                    </select>
                </div>
                <div class="layui-inline">
                    <select name="status" lay-filter="status">
                        <option value="">状态</option>
                        <option value="待审批">待审批</option>
                        <option value="审批中">审批中</option>
                        <option value="审批通过">审批通过</option>
                        <option value="已拒绝">已拒绝</option>
                    </select>
                </div>
                <div class="layui-inline">
                    <select name="flowTitle" lay-filter="flowTitle">
                        <option value="">审批类型</option>
                        <option value="用章审批">用章审批</option>
                        <option value="合同审批">合同审批</option>
                        <option value="资金审批">资金审批</option>
                    </select>
                </div>
                <button type="button" class="layui-btn layui-btn-normal" lay-submit lay-filter="search">搜索</button>
                <button type="button" class="layui-btn layui-btn-warm" lay-submit lay-filter="search_clear">
                    <i class="layui-icon">&#x1002;</i>
                </button>
            </div>
        </form>
        <div class="layui-form" id="table-list">
            <div id="table_thead_view"></div>
            <div>
                <div id="my_page" style="text-align:center"></div>
            </div>
        </div>
    </div>
</div>
<script src="../../static/admin/layui/layui.js" type="text/javascript" charset="utf-8"></script>
<script src="../../static/admin/js/common.js" type="text/javascript" charset="utf-8"></script>
<script src="jquery-1.7.2.min.js"></script>
<script type="text/html" id="table_thead_temp">
    <table class="layui-table" lay-even lay-skin="nob">
        <thead>
        <tr>
            <th>ID</th>
            <th>紧急程度</th>
            <th>标题</th>
            <th>申请时间</th>
            <th>审批类型</th>
            <th>状态</th>
            <th>节点</th>
        </tr>
        </thead>
        <tbody>
        {{# layui.each(d.data.list, function(index, item){ }}
        <tr>
            <td>{{item.id}}</td>
            <td>{{item.urgent}}</td>
            <td>{{item.title}}</td>
            <td>{{item.creationtime}}</td>
            <td>{{item.flow.title}}</td>
            <td>
                <button class="layui-btn layui-btn-mini layui-btn-normal">{{item.status}}</button>
            </td>
            <td>{{item.nodeProcess}}</td>
        </tr>
        {{# }); }}
        </tbody>
    </table>

</script>
<script>
    $(function () {
        show(1);
    })

    function show(pageNum, title, urgent, flowTitle, status) {
        layui.use(['form', 'laytpl', 'laypage'], function () {
            var laytpl = layui.laytpl;
            var load_index = layer.load(0, {shade: [0.2, '#393D49']});
            $.ajax(ip + 'flow/getServiceMonitor', {
                dataType: 'json',
                type: 'post',
                data: {
                    "pageNum": pageNum,
                    "pageSize": 5,
                    "title": title,
                    "urgent": urgent,
                    "status": status,
                    "flowTitle": flowTitle
                }
            }).done(function (data) {
                layer.close(load_index);
                if (data.code == '0') {
                    var table_thead_temp = document.getElementById('table_thead_temp').innerHTML;
                    laytpl(table_thead_temp).render(data, function (html) {
                        document.getElementById('table_thead_view').innerHTML = html;
                    });
                    layui.laypage({
                        cont: $('#my_page'),
                        pages: Math.ceil(data.data.count / 5),
                        curr: pageNum,
                        skin: '#00b5f9',
                        jump: function (obj, first) {
                            if (!first) {
                                show(obj.curr, title, urgent, flowTitle, status);
                            }
                        }
                    })
                } else {
                    layer.alert(data.message, {
                        icon: 5,
                        title: "提示"
                    });
                }
            })
        })
    }

    layui.use(['form', 'layedit', 'laydate'], function () {
        var form = layui.form(),
            layer = layui.layer;
        form.on('submit(search)', function (data) {
            show(1, data.field.title, data.field.urgent, data.field.flowTitle, data.field.status)
            return false;
        });
        form.on('submit(search_clear)', function (data) {
            document.getElementById("myform").reset();
            layui.form().render();
            show(1);
            return false;
        });
    })

</script>
</body>

</html>